<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS常用值</title>
        <style>
            h1{
                color: red;
                color: rgb(255,0,0);
                color: rgb(0,255,255);
                color: rgb(0,255,0);
                color: rgb(255,0,255);
                color: rgb(0,0,255);
                color: rgb(255,255,0);
                color: #ffffff;
                color: #fff;
                color: #000000;
                color: #000;
                color: #081234;

                /*带不透明度颜色 1完全不透明 0完全透明 0.x半透明*/
                color: rgba(255,0,0,0.1);
                color: rgba(255,0,0,0.8);
                color: rgba(255,0,0,0.3);
                color: rgba(255,0,0,.1);
                color: rgba(255,0,0,1);
            }
            /*块级元素的默认宽度为父级宽度的100%，高度为0靠内容撑起来  */
            .d1{
                /*注意：插入背景图必须设置所在区域的大小*/
                width: 50px;
                height: 100px;
                background-image: url("img/mr.png");
                /*调整背景图大小 宽度 高度*/
                background-size: 50px 100px;
                /*可以同时显示背景色 没图的地方显示背景色*/
                background-color: cyan;
            }







            .d2{/*500*300插入图片*/
                width: 500px;
                height: 300px;
                background-image: url("img/mr.png");
                border: red solid 5px;
                /*设置背景图不允许重复*/
                background-repeat: no-repeat;
                background-position: 0,0;
                background-position: 50px,0;
                background-position: -50px,0;/*向左*/
                background-position: 0,50px;/*向下*/
                background-position: -50px,-50px;/*左上*/
                background-position: center;
                background-position: left top;/*左上*/
                background-position: 50% 50%;/*居中*/
                background-position: 100% 100%;/*右下*/
            }
            .d3{
                width: 500px;
                height: 300px;
                /*线性渐变 角度值 颜色1 颜色2.....*/
                background-image: linear-gradient(135deg,red,orange,yellow,gray);
            }

        </style>
    </head>
    <body>
        <h1>测试颜色</h1>
        <!--.d*3 Tab补全-->
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>

    </body>
</html>